<%--
  Created by IntelliJ IDEA.
  User: q
  Date: 2021/10/25
  Time: 16:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
  <head>
    <title>餐馆王</title>
  </head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="${applicationScope.backendStyleFolder}/js/jquery.js"></script>
  <script type="text/javascript" src="${applicationScope.backendStyleFolder}/js/page_common.js"></script>
  <body>
<%--  <!--头部显示-->
  <nav class="header" id="head">
    <img class="Logo" src="LOGO.jpg">
    <h1 class="LogoName">客户应用平台</h1>
    <img src="TopPic.png" width="100%" height="53">
  </nav>--%>
  <!--中部内容-->
  <div class="wrap" id="wrap">
    <div class="logWrap" >
      <%--<img id="banner" class="banner" src="demo2.jpg" >--%>
      <div class="logWrap">
        <!-- 头部提示信息 -->
        <div class="LoginIndex LoginTop">
          <p class="p1">欢迎登陆餐馆王~</p>
        </div>
        <form action="/login?method=login" method="post">
        <!-- 输入框 -->
        <div class="InputStr">用户名：
          <%--<img src="user.png" width="20" height="20" alt=""/>--%>
          <input type="text" name="username" id="username"              value="admin"
                 placeholder="输入用户名" /><span id="msg"></span>
        </div>
        <div class="InputStr">密码：
          <%--<img src="password.png" width="20" height="20" alt=""/>--%>
          <input type="password" name="password"                        value="admin"
                 placeholder="输入用户密码" />
        </div>
        <div class="InputStr">验证码：<input type="text" name="check"/>&nbsp;<img style="top: -10px;left: 70px" src="verifyCode" onclick="changeVerifyCode(this);"/></div>
        <div class="InputStr"></div>
        <div class="LoginIndex LoginTop">
        <input type="radio" id="front" name="isAdmin" value="0" checked=""/><label for="front">去前台点菜系统</label>
        <input type="radio" id="backend" name="isAdmin" value="1" /><label for="backend">去后台管理系统</label>
        </div>
        <div class="LoginButton">
          <a href="index.html" target="_self"><button>登 录</button></a>
        </div>
        <br/>
        </form>
        <div class="LoginButton">
          <a href="logon.jsp" target="_self"><button>注 册</button></a>
        </div>
      </div>
    </div>
  </div>
  </body>
</html>
<script>

  function changeVerifyCode(obj) {
    console.log(obj);
    obj.src = 'verifyCode?time=' + new Date().getTime();
  }

  $("#username").change(function () {
    $.get("/login?method=nameExists",{"userName" : $(this).val()},function (result) {
      $("#msg").text(result.message)
      if (result.success){
        $("#msg").css("color", "green");
        $("#addBtn").attr("disabled", false);
      } else {
        $("#msg").css("color", "red");
        $("#addBtn").attr("disabled", true);
      }
    },"json")
  })

</script>
<style>

  *{
    margin: 0;
    padding: 0;
  }
  #head{
    height: 90px;

  }
  #head .Logo{
    width: 72px;
    height: 72px;
    vertical-align: middle;
  }
  #head .LogoName{
    font-size:40px;
    font-family:"楷体";
    color:#00BFFF;
    display:inline;
    position: absolute;
    top: 14px;
  }
  #wrap {
    height: 408px;
    width: 100%;
    position:relative;
  }
  #wrap .logWrap{
    height: 408px;
    width: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    right: 50%;
    margin: 0 0 0 -300px;
    display: inline-block;
  }
  #wrap .banner{
    height: 300px;
    width: 300px;
    position: absolute;
    top: 26%;
  }
  #wrap .logWrap {
    float: right;
    height: 408px;
    width: 368px;
    position: absolute;
    top: 0%;
    left: 55%;
    right: 45%
  }
  .LoginButton a button {
    width: 100%;
    height: 45px;
    background-color: #21a4ee;
    border: none;
    color: white;
    font-size: 18px;
  }
  .logWrap .LoginIndex.LoginTop .p1 {
    display: inline-block;
    font-size: 28px;
    margin-top: 110px;
    width: 86%;
  }
  #wrap .logWrap .LoginIndex.LoginTop {
    width: 86%;
    border-bottom: 1px solid #ee7700;
    margin-bottom: 60px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
  }
  .logWrap .InputStr img {
    position: absolute;
    top: 12px;
    left: 8px;
  }
  .logWrap .InputStr input {
    width: 100%;
    height: 42px;
    text-indent: 2.5rem;
  }
  #wrap .logWrap .InputStr {
    width: 86%;
    position: relative;
    margin-bottom: 30px;
    margin-top: 30px;
    margin-right: auto;
    margin-left: auto;
  }
  #wrap .logWrap .LoginButton {
    width: 86%;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
  }

/*----------------背景-----------------*/
  body {
    margin: 0;
    width: 100%;
    height: 100vh;
    font-family: "Exo", sans-serif;
    color: #fff;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
  }

  @keyframes gradientBG {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  .container {
    width: 100%;
    position: absolute;
    top: 35%;
    text-align: center;
  }

  h1 {
    font-weight: 300;
  }

  h3 {
    color: #eee;
    font-weight: 100;
  }

  h5 {
    color:#eee;
    font-weight:300;
  }

  a,
  a:hover {
    text-decoration: none;
    color: #ddd;
  }


</style>